<template>
  <div class="task">
    <div class="taskTop">
      <div class="title">行为决策实验平台</div>
      <div class="phase">
        <el-row style="height: 100%">
          <el-col :span="4"></el-col>
          <el-col
            :span="16"
            style="display: flex; align-items: center; height: 100%">
            <span style="margin-right: 50px">第3场</span>
            <span style="margin-right: 50px" >实验阶段：第1阶段</span>
            <span>实验桌号： {{ $store.state.seatID }}号</span>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </div>
    </div>
    <div class="taskMain">
      <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%"></el-col>
        <el-col :span="16" style="height: 100%">
          <div class="mainTask">
            <el-row style="height: 100%">
              <el-col
                :span="8"
                style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  font-size: 20px;
                  color: #3360ec;
                  font-weight: 600;">投资任务进度：{{$store.state.currentRound}}/12</el-col>
              <el-col :span="8"
                ><div class="grid-content ep-bg-purple-light"
              /></el-col>
              <el-col
                :span="8"
                style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  justify-content: flex-end;
                  font-size: 20px; "
                >当前实验周期剩余时间：<span style="font-size: 28px; font-weight: 600; color: #3360ec"
                  ><a-countdown :value="$store.state.rest_Time" :now="now" /></span
                ></el-col>
            </el-row>
          </div>
          <div class="mainCard">
            <el-row :gutter="12" style="height: 100%">
              <el-col :span="8">
                <el-card shadow="always" style="height: 70%; border-radius: 10px; width: 85%">
                  <div
                    class="postNum"
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px;">  <el-icon color="#165dff" :size="27" ><TrendCharts /></el-icon>
                    基金 Ⅰ
                  </div>
                  <div class="postName" style="padding-top: 13px;font-size: 15px">拟任基金经理LJW</div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card
                  shadow="always"
                  style="height: 70%; width: 85%; border-radius: 10px" >
                  <div
                    class="postNum"
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px; " > <el-icon color="#73d13d" :size="27" ><TrendCharts /></el-icon>
                    基金 Ⅱ
                  </div>
                  <div class="postName" style="padding-top: 13px;font-size: 15px">拟任基金经理LJW</div>
                </el-card> </el-col
              ><el-col :span="8">
                <el-card
                  shadow="always"
                  style="height: 70%; border-radius: 10px; width: 85%" >
                  <div
                    class="postNum"
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px;
                    ">  <el-icon color="#ffc53d " :size="27"><TrendCharts /></el-icon>
                    基金 Ⅲ
                  </div>

                  <div class="postName" style="padding-top: 13px;font-size: 15px">拟任基金经理LJW</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="mainWord">
            <p style="font-size: 20px; padding: 0; margin: 0">
              请您拉动滑动并做出您本轮的资产配置决策：<span
                style="font-size: 28px; color: #ee6323; font-weight: 600">(注意您有15s的时间完成决策并点击确认提交)</span>
            </p>
            <p style="font-size: 20px; padding: 0; margin: 0">
              当前未配置资产比例为<span style="font-size: 28px; color: #ee6323; font-weight: 600" >{{100-percent1-percent2-percent3}}%</span>
            </p>
          </div>
          <div class="mainSlider">
            <el-row style="height: 100%">
              <el-col :span="4"></el-col>
              <el-col :span="16" style="height: 100%">
                <div class="jj1">
                  <span style="padding-right: 10px; font-size: 20px">基金Ⅰ</span>
                  <div class="slider1">
                    <el-slider v-model="percent1"  @change="sliderChange1" :format-tooltip="formatTooltip"  :marks="setMarker"   />
                  </div>
                </div>
                <div class="jj1">
                  <span style="padding-right: 10px; font-size: 20px"
                    >基金Ⅱ</span>
                  <div class="slider1">
                    <el-slider v-model="percent2"  @change="sliderChange2" :format-tooltip="formatTooltip"   :marks="setMarker"  />
                  </div>
                </div>
                <div class="jj1">
                  <span style="padding-right: 10px; font-size: 20px"
                    >基金Ⅲ</span>
                  <div class="slider1">
                    <el-slider v-model="percent3"  @change="sliderChange3"  :format-tooltip="formatTooltip"  :marks="setMarker"  />
                  </div>
                </div>
              </el-col>
              <el-col :span="4"></el-col>
            </el-row>
          </div>
          <div class="mainBtn">
            <el-button @click="enterBtn" type="primary">确认（{{timeOne}}S）</el-button>
          </div>
        </el-col>
        <el-col :span="4" style="height: 100%"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { queryRound,submitPolicy} from '@/api/index'
import { ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import {TrendCharts} from "@element-plus/icons";
export default {

  setup() {
        const now = Date.now();
    const start = ref(false);
    const handleFinish = () => {
      Message.info('Finish');
    };
    return {
      now,
      start,
      handleFinish,
    };
  },
  name: 'TaskOne',
  components: {
    TrendCharts
  },
  data() {
    return {
      IntervalId:0, //倒计时id
      percent1:0,
      percent2:0,
      percent3:0,
      timeOne: 0 , // 页面的15S
      sumPercent:0,
      currentRound:0,
    }
  },
  computed: {
    // 时间轴的点
    setMarker() {
      // 模拟每300个点加分割线
      let marks = {
        25: {
          style: {
            color: '#ee6323',
          },
          label: '25%',
        },
        50: {
          style: {
            color: '#ee6323',
          },
          label: '50%',
        },
        75: {
          style: {
            color: '#ee6323',
          },
          label: '75%',
        },
      };
      return marks;
    },
  },
  mounted() {

    const seatID = this.$store.state.seatID  //取桌号

    queryRound({seatID}).then(res=>{   //获取当前的轮数
      this.$store.state.currentRound =  res.currentRound
      console.log("获取当前的轮数")
      console.log(res)
    if(res.isSeatValid==false)    //桌号不存在
    {
      this.$message.error('桌号不存在，请重新登录!')
    }
      //轮数

    })
    this.$store.commit("resTime")  //调用vuex，激活全局倒计时
    let THIS = this
    THIS.timeOne  = 15  //15秒选择时间
    this.IntervalId = setInterval(THIS.countDown, 1000)  //每一秒调用函数一次
  },

  watch: {
    // eslint-disable-next-line
    timeOne: function (newVal, oldVal) {
      if (newVal == 0) {   //15秒的倒计时结束
        this.enterBtn()
        // this.$router.push({
        //   name: 'IsShowIncome'
        // })
      }
    },
    sumPercent: function (newVal, oldVal)   //监听总投资比例
    {
          if(newVal>100)
          {
            this.handleClick()
            if(this.percent1>this.percent2&&this.percent1>this.percent3)  // 投资第一个基金的比例最多
            {

              this.sumPercent-=this.percent1
              this.percent1 = 100 - this.percent2-this.percent3
            }
          else if(this.percent2 > this.percent3) {

              this.sumPercent-= this.percent2
              this.percent2 = 100 - this.percent1-this.percent3
            }
          else {
              this.sumPercent-= this.percent3
              this.percent3 = 100 - this.percent2-this.percent1
            }
          }
    }
  },

  methods: {
    formatTooltip(value) {
      return  value+'%'
    },
    sliderChange1(){
      this.sumPercent = this.percent1+this.percent2+this.percent3
    },
    sliderChange2(){
      this.sumPercent = this.percent1+this.percent2+this.percent3
    },
    sliderChange3(){
      this.sumPercent = this.percent1+this.percent2+this.percent3
    },

    //15S倒计时
    countDown() {
      let THIS = this
      THIS.timeOne--
      // console.log(this.percent1)
    },
    handleClick() {
      this.$message.error('投资总比例不能超过100%!')
    },
    onPercentChange(per) {
      console.log(per)
    },
    enterBtn() {
      const seatID = this.$store.state.seatID
      const round = this.$store.state.currentRound  //第几轮
      const invPolicy = [this.percent1,this.percent2,this.percent3]  //基金投资百分比
      const totalScale = this.sumPercent //三种基金投资百分比总和
      submitPolicy({seatID,round,invPolicy,totalScale}).then(res=>{   //提交测试者本轮的决策信息
        console.log("提交测试者本轮的决策信息")
        console.log(res)
        this.$store.state.totalAssets = res.totalAssets
        this.$store.state.isSeatValid = res.isSeatValid
        this.$store.state.currentProfit = res.currentProfit
        this.$store.state.totalProfit = res.totalProfit


      })
      clearInterval(this.IntervalId)
      if(this.timeOne>0)  //提前点击按钮 跳转到休息页面
      {
        this.$router.push({path: '/break', query: {coutTime: this.timeOne}});
      }
      else {
        this.$router.push({ name: 'IsShowIncome' })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.task {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  .taskTop {
    width: 100%;
    height: 15%;

    .title {
      width: 100%;
      height: 60%;
      font-size: 58px;
      letter-spacing: 10px;
      font-weight: 700;
      color: aliceblue;
      background-color: #0b45b0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .phase {
      width: 100%;
      height: 40%;
      border: 1px solid rgb(185, 185, 185);
    }
  }
  .taskMain {
    width: 100%;
    height: 85%;
    .mainTask {
      width: 100%;
      height: 8%;
    }
    .mainCard {
      width: 100%;
      height: 20%;
      .row {
        .el-col {
          .el-col-8 {
            .is-guttered {
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
    .mainWord {
      width: 100%;
      height: 10%;
    }
    .mainSlider {
      width: 100%;
      height: 50%;
      .jj1 {
        width: 100%;
        height: 33.33%;
        display: flex;
        align-items: center;
        .slider1 {
          width: 80%;
          border: 1px solid rgb(182, 176, 176);
          padding: 20px 20px;
        }
      }
    }
    .mainBtn {
      width: 100%;
      height: 12%;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button {
        width: 20%;
        height: 44%;
        background-color: #0b5aff;
      }
    }
  }
}
</style>